<template>
	<view class="myoder" style="padding-top: 40px;">
		<view class="myoder_top" style="position:fixed;width:100%;top: 0;">
			<v-tabs v-model="activeTab" @change="changeTab" :scroll="false" color="#777777" activeColor="#DB1B22" fontSize="12px"
			 lineScale="0.3" paddingItem="0 10rpx" lineColor="#DB1B22" :tabs="['全部', '待付款', '待发货', '待收货', '待评价']"></v-tabs>
		</view>
		<scroll-view v-if="scrollhide"
				:style="'height:' + scrollHeight + 'px'"
				scroll-x="true"
				refresher-enabled="true"
				:refresher-triggered="refresherTriggered"
				:refresher-threshold="0"
				@refresherpulling="onPulling"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@refresherabort="onAbort" class="myoder_centent">
			<view class="item" v-for="item in Item" :key="item" @click.stop="details(item)">
				<view class="item_title">
					<view class="title_left">{{item.date_add}}</view>
					<view class="title_right">{{item.state}}</view>
				</view>
				<view class="item_content" v-for="i in item.goods" :key="i">
					<image :src="i.image||'/pagesB/static/微信图片_20201124091755.png'" mode=""></image>
					<view class="ItemContent">
						<view class="title">{{i.name}}</view>
						<view class="parameter" >
							<view class="parameter1">{{i.option_name}}</view>
						</view>
						<view class="price_ctrlbox">
							<view class="price">￥{{i.price}}</view>
							<view class="ctrlbox">
								x{{i.quantity}}
							</view>
						</view>
					</view>
				</view>
				<view class="total">
					<view class="totalPrice">
						共{{item.goods.length}}件商品，合计<text>￥{{item.order_amount}}</text>（含运费￥{{item.express_amount}}）
					</view>
				</view>
				<view class="item_buttom " v-if="item.state=='待付款'">
					<view class="buttom_payment" @click.stop="close('1',item)">立即付款</view>
					<view class="buttom_cancel" @click.stop="close('2',item)">取消订单</view>
				</view>
				<view class="item_buttom " v-if="item.state=='待收货'">
					<view class="buttom_cancel" @click="$linkTo('/pagesB/express?id='+item.order_sn)">查看物流</view>
					<view class="buttom_cancel" @click.stop="close('4',item)">确认收货</view>
				</view>
			</view>
		</scroll-view>
		<view class="myoder_centent" v-else>
			<view class="item" v-for="item in Item" :key="item" @click.stop="details(item)">
				<view class="item_title">
					<view class="title_left">{{item.date_add}}</view>
					<view class="title_right">{{item.state}}</view>
				</view>
				<view class="item_content" v-for="i in item.goods" :key="i">
					<image :src="i.image||'/pagesB/static/微信图片_20201124091755.png'" mode=""></image>
					<view class="ItemContent">
						<view class="title">{{i.name}}</view>
						<view class="parameter" >
							<view class="parameter1">{{i.option_name}}</view>
						</view>
						<view class="price_ctrlbox">
							<view class="price">￥{{i.price}}</view>
							<view class="ctrlbox">
								x{{i.quantity}}
							</view>
						</view>
					</view>
				</view>
				<view class="total">
					<view class="totalPrice">
						共{{item.goods.length}}件商品，合计<text>￥{{item.order_amount}}</text>（含运费￥{{item.express_amount}}）
					</view>
				</view>
				<view class="item_buttom " v-if="item.state=='待付款'">
					<view class="buttom_payment" @click.stop="close('1',item)">立即付款</view>
					<view class="buttom_cancel" @click.stop="close('2',item)">取消订单</view>
				</view>
				<view class="item_buttom " v-if="item.state=='待收货'">
					<view class="buttom_cancel" @click="$linkTo('/pagesB/express?id='+item.order_sn)">查看物流</view>
					<view class="buttom_cancel" @click.stop="close('4',item)">确认收货</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/api/md5.js'
	import {requestUrl} from '@/common/config.js'
	export default {
		data() {
			return {
				 activeTab: 0,
				 Item:[],
				 page:1,
				 index:'',
				 scrollhide:true,
				 refresherTriggered: false,
				 _refresherTriggered: false
			};
		},
		onLoad(e) {
			this.activeTab=e.id
			console.log(this.activeTab)
			this.getOrders()
		},
			onPageScroll(e) {
				// console.log(e.scrollTop);//距离页面顶部距离
				if (e.scrollTop > 20) {
					this.scrollhide = false;
				} else {
					this.scrollhide = true;
				}
			},
		methods:{
			onPulling(e) {
				// console.log("onpulling", e);
			},
			onRefresh() {
				console.log('自定义下拉刷新被触发');
				let _this = this;
				if (_this._refresherTriggered) {
					return;
				}
				_this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!_this.refresherTriggered) {
					_this.refresherTriggered = true;
				}
				this.loadStoreData();
			},
			onRestore() {
				console.log('自定义下拉刷新被复位');
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			onAbort() {
				console.log('自定义下拉刷新被中止	');
				let _this = this;
				_this.refresherTriggered = false;
				_this._refresherTriggered = false;
			},
			loadStoreData() {
				let _this = this;
				this.listData();
				setTimeout(() => {
					_this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
					_this._refresherTriggered = false;
				}, 1000);
			},
			listData() {
				let _this = this;
				//这里是调用后台接口的方法数据
				this.page=1,
				this.getOrders()
			},
			close(e,i){
				if(e==1){
					this.$emit('update',i)
					uni.navigateTo({
						url:'/pagesA/PaymentMethod/PaymentMethod',
						  success: function(res) {
						    // 通过eventChannel向被打开页面传送数据
						    res.eventChannel.emit('acceptDataFromOpenerPage', i)
						  }
					})
				}else if(e==2){
					uni.showModal({
						content:'是否确定取消订单',
						title:'警告',
						success: (res) => {
							if(res.confirm){
								
							this.$request('/app/order/cancel','post',{
								access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
								order_sn:i.order_sn
							}).then(res=>{
								uni.showToast({
									title:res.message
								})
								this.getOrders()
							})
							}
						},
					})
					
				}else if(e==3){
					
				}else if(e==4){
					this.$request('/app/order/delivery','post',{
						access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
						order_sn:i.order_sn
					}).then(res=>{
						uni.showToast({
							title:res.message
						})
						this.getOrders()
					})
				}
			},
			getOrders1(){
				let time = Math.round(new Date().getTime() / 1000).toString()
				this.access_token=JSON.parse(uni.getStorageSync('access_token'))
				let _this = this
				let Time = ['time', time].join('=')
				let Access_token = ['access_token', this.access_token].join('=')
				let content = ['content=pinet.FeiMao.2017'].join()
				let arr = [content, Time].sort(function(a, b) {
					a - b
				})
				let newarr = md5(arr.join('&'))
				uni.request({
					url: requestUrl+'/app/order/getOrders',
					method: "GET",
					data: {
						access_token: this.access_token,
						time: time,
						sign: newarr,
						state:this.activeTab||'0',
						page:this.page.toString(),
						key:''
					},
					success: function(res) {
				
						if(res.data.errcode==0){
							function dateTO(data) {
								//data为时间戳
								var date = new Date(data);
								var Y = date.getFullYear() + '-';
								var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
								var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
								var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
								var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
								var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
								var strDate = Y + M + D + h + m + s; //转换为年月日时分秒
								// var strDate = Y + M + D; //转换为年月日
								return strDate;
							}
							res.data.content.forEach(v=>{
								v.date_add=dateTO(v.date_add * 1000)
								_this.Item.push(v)
							})
							console.log(res)
						}
					}
				});
			},
			getOrders(){
				let time = Math.round(new Date().getTime() / 1000).toString()
				this.access_token=JSON.parse(uni.getStorageSync('access_token'))
				let _this = this
				let Time = ['time', time].join('=')
				let Access_token = ['access_token', this.access_token].join('=')
				let content = ['content=pinet.FeiMao.2017'].join()
				let arr = [content, Time].sort(function(a, b) {
					a - b
				})
				let newarr = md5(arr.join('&'))
				uni.request({
					url: requestUrl+'/app/order/getOrders',
					method: "GET",
					data: {
						access_token: this.access_token,
						time: time,
						sign: newarr,
						state:this.activeTab||'0',
						page:this.page.toString(),
						key:''
					},
					success: function(res) {
				
						if(res.data.errcode==0){
							function dateTO(data) {
								//data为时间戳
								var date = new Date(data);
								var Y = date.getFullYear() + '-';
								var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
								var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
								var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
								var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
								var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
								var strDate = Y + M + D + h + m + s; //转换为年月日时分秒
								// var strDate = Y + M + D; //转换为年月日
								return strDate;
							}
							res.data.content.forEach(v=>{
								v.date_add=dateTO(v.date_add * 1000)
							})
								_this.Item=res.data.content
							console.log(res)
						}
					}
				});
			},
			details(e){
				console.log(e)
				uni.setStorage({
				    key: 'order_sn',
				    data: JSON.stringify(e.order_sn),
				    success: function () {
				    }
				});
				uni.navigateTo({
					url: '/pagesB/orderdetails/orderdetails'
				});
			},
			changeTab(index) {
				this.activeTab=index
				this.page=1
				this.getOrders()
			},
		},
		onReachBottom(){
			console.log(1)
			this.page++
			this.getOrders1()
		},
	}
</script>

<style lang="less">
	.myoder{
		height: 100%;
		background-color: #F3F4F5;
		display: flex;
		flex-direction: column;
		.myoder_top{
			margin-bottom: 10rpx;
			.v-tabs__container-line{
				height: 2px !important;
			}
		}
		.myoder_centent{
			background-color: #F3F4F5;
			flex: 1;
			.item{
				background-color: #fff;
				margin-bottom: 10rpx;
				padding-bottom: 32rpx;
				.item_title{
					display: flex;
					justify-content: space-between;
					padding: 22rpx;
					border-bottom: 1px solid #EEEEEE;
					.title_left{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
					}
					.title_right{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #DB1B22;
					}
				}
				.item_content{
					display: flex;
					padding: 20rpx;
					border-bottom: 1px solid #EEEEEE;
					image{
						height: 180rpx;
						width: 180rpx;
						margin-right: 16rpx;
					}
					.ItemContent{
						flex: 1;
						display: flex;
						    flex-direction: column;
						    justify-content: space-between;
						.title{
							height: 72rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
						}
						.parameter{
							height: 34rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #9DA5A8;
						}
						.price_ctrlbox{
							display: flex;
							justify-content: space-between;
						}
						.price{
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #111111;
						}
						.ctrlbox{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #9DA5A8;
						}
					}
				}
				.total{
						display: flex;
						flex-direction: row-reverse;
						margin-top: 20rpx;
						.totalPrice{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
							text{
								font-size: 32rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #111111;
							}
						}
				}
				.item_buttom{
					display: flex;
					flex-direction: row-reverse;
					margin-top: 20rpx;
					.buttom_cancel{
						width: 132rpx;
						height: 48rpx;
						background: #FFFFFF;
						border-radius: 24rpx;
						border: 1px solid #777777;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						text-align: center;
						line-height: 48rpx;
						margin-right: 22rpx;
					}
					.buttom_payment{
						width: 132rpx;
						height: 48rpx;
						background: #DB1B22;
						border-radius: 24rpx;
						border: 1px solid #DB1B22;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #fff;
						text-align: center;
						line-height: 48rpx;
						margin-right: 22rpx;
					}
				}
			}
		}

	}
</style>
